<template>
  <div class="bg_f4 loginwrapper">
    <LoginNavbar />
    <div class="flexcenter full_w loginbody">
      <!-- <div class="loginleft">
        <img src="@/assets/images/loginside.png" alt="" class="loginside" />
        <div class="leftcontent">
            <div class="c_fff f-24 textcenter mb_80">欢迎使用</div>
            <div class="f-16 c_fff textcenter mb_100">天天幸运站，快速制作抽奖活动页面。免费使用，不限奖品数量，不限使用人数</div>
            <div class="zcbtn flexcenter c_fff">立即注册</div>
        </div>
      </div> -->
      <div class="loginleft bg_fff login_r">
        <el-tabs
          v-model="activeName"
          stretch
          @tab-click="handleClick"
          class="logintabs"
        >
          <el-tab-pane label="账号登录" name="first">
            <el-form
              :model="loginform"
              :rules="rules"
              ref="loginform"
              class="loginform"
            >
              <el-form-item label="" prop="username">
                <el-input
                  v-model="loginform.username"
                  auto-complete="off"
                  placeholder="请输入用户名"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="user"
                    class="el-input__icon input-icon"
                  />
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input
                  v-model="loginform.password"
                  type="password"
                  auto-complete="off"
                  placeholder="请输入密码"
                  show-password
                  @keyup.enter.native="handleLogin(1)"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="password"
                    class="el-input__icon input-icon"
                  />
                </el-input>
              </el-form-item>
              <el-checkbox
                v-model="loginform.rememberMe"
                style="margin: 0px 0px 25px 0px"
                >记住密码</el-checkbox
              >
              <el-form-item style="width: 100%">
                <el-button
                  :loading="loading"
                  size="medium"
                  type="primary"
                  style="width: 100%"
                  @click.native.prevent="handleLogin(1)"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
                <div class="flexrowbetween">
                  <div>
                    没有账号？
                    <span class="c_primary commhover" @click="goPage('/register')">立即注册</span>
                  </div>
                  <div class="c_primary commhover" @click="goPage('/rebackpwd')">忘记密码</div>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="短信登录" name="second">
            <el-form
              :model="phoneform"
              :rules="phonerules"
              ref="phoneform"
              class="loginform"
            >
              <el-form-item label="" prop="phone">
                <el-input
                  v-model="phoneform.phone"
                  auto-complete="off"
                  placeholder="请输入手机号码"
                >
                <i slot="prefix" class="el-icon-mobile-phone input-icon"></i>
                  <!-- <svg-icon
                    
                    icon-class="user"
                    class="el-input__icon input-icon"
                  /> -->
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="code" class="codeiput">
                <el-input
                  v-model="phoneform.code"
                  auto-complete="off"
                  placeholder="请输入短信验证码"
                  @keyup.enter.native="handleLogin(2)"
                >
                <i slot="prefix" class="el-icon-message input-icon"></i>
                <!--  -->
                  <!-- <svg-icon
                    slot="prefix"
                    icon-class="password"
                    class="el-input__icon input-icon"
                  /> -->
                </el-input>
                <span class="codebox">
                    <span class="c_primary commhover" v-if="code=='获取验证码'" @click="gain"> {{code}}</span>
                    <span v-else class="c_primary commhover" >{{code}}</span>
                </span>
              </el-form-item>
              <el-form-item style="width: 100%">
                <el-button class="mt_45"
                  :loading="loading"
                  size="medium"
                  type="primary"
                  style="width: 100%"
                  @click.native.prevent="handleLogin(2)"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
                <div class="flexrowbetween">
                  <div>
                    没有账号？
                    <span class="c_primary commhover" @click="goPage('/register')">立即注册</span>
                  </div>
                  <div class="c_primary commhover" @click="goPage('/rebackpwd')">忘记密码</div>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>   

<script>
import { LoginNavbar } from "@/layout/components";
import Cookies from "js-cookie";
import { getToken, setToken, removeToken } from '@/utils/auth'
import { sendCode } from '@/api/login'
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
  data() {
    return {
      activeName: "first",
      loginform: {
        username: "",
        password: "",
        rememberMe: false,
      },
      rules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
      },
      phoneform:{
        phone:'',
        code:'',
      },
      phonerules:{
        phone: [
          { required: true, trigger: "blur", message: "请输入您的手机号码" },
        ],
        code: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
      },
      loading: false,
      code:'获取验证码'
    };
  },
  components: {
    LoginNavbar,
  },
  created() {
    // //如果头部带token，直接进入首页
    console.log('进来登录页了')
    let query = this.$route.query
    if (query.token) {
      console.log('---带token了---', this.$route.query.token,this.$route.query.admin_id)
      setToken(this.$route.query.token)
      localStorage.setItem('admin_id',query.admin_id)
      this.$store.dispatch('GetInfo').then(() => {
        if(query.activeId){
          this.$router.push({name:'CreateTemp',query:{id:query.activeId}})
        }else{
          this.$router.push('/')
        }
      })
    }else{
      localStorage.setItem('admin_id','')
    }
  },
  mounted() {},
  methods: {
    handleClick() {},

    register() {},

    // links() {},
    // enter1(e) {},
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },

    //获取验证码
    gain() {
      this.codeEvent(this.phoneform.phone);
    },
    //封装验证码的函数
    codeEvent(iphone) {
      console.log(iphone)
      let reg = /^1[0-9]{10}$/;
      if (!reg.test(iphone)) {
        this.$message({
          message: "请输入正确手机号!",
          type: "warning",
          offset: 150,
        });
      } else {
        sendCode({
          phone: iphone,
          type: 'login',
        }).then(() => {
          this.countDown(60);
        });
      }
    },
    //验证码倒计时
    countDown(time) {
      let _this = this;
      time--;
      if (time == 0) {
        _this.code = "获取验证码";
        return;
      }
      setTimeout(function () {
        _this.code = time + "秒";
        _this.countDown(time);
      }, 1000);
    },

    handleLogin(type){
      if(type == 1){
        this.$refs.loginform.validate(valid => {
          if(!valid) return
          this.loading = true;
          if (this.loginform.rememberMe) {
            Cookies.set("username", this.loginform.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginform.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginform.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginform).then(() => {
            this.$router.push({ path: "/" }).catch(()=>{});
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          });
        })
      }else{
        this.$refs.phoneform.validate(valid => {
          if(!valid) return
          this.loading = true;
          this.$store.dispatch("PhoneLogin", this.phoneform).then(() => {
            this.$router.push({ path: "/" }).catch(()=>{});
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          });
        })
      }
    },

    goPage(page){
      this.$router.push({path:page})
    },
  },
};
</script>

<style lang="scss" scoped>
.loginwrapper {
  width: 100%;
  height: 100%;
  background:url('~@/assets/images/bg.png') 50% 50% no-repeat;
  background-size: cover;
}
.loginleft {
  width: 460px;
  height: 500px;
  position: relative;
  .leftcontent{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 80px 50px 30px;
  }
  .loginside {
    width: 100%;
    height: 100%;
  }
}
.loginbody {
  width: 100%;
  height: 100vh;
  justify-content: flex-end;
  padding-right: 15%;
}
.login_r {
  border-radius: 8px;
  // border-bottom-right-radius: 8px;
  padding: 66px 50px 30px;
}
.loginform{
    padding-top: 30px;

    ::v-deep .el-input--prefix .el-input__inner{
        padding-left:45px
    }
    ::v-deep .el-input__prefix{
        left: 18px;
    }
}
.el-form-item{
    margin-bottom: 32px;
}
.el-button{
    border-radius: 20px;
}
.codeiput{
    position: relative;
    ::v-deep .el-input__inner{
       padding-right: 100px;
    }
}
.codebox{
    position: absolute;
    right: 10px;
}
.zcbtn{
    height: 37px;
    width: 200px;
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    margin: auto;
}
</style>
<style lang="scss">
.logintabs {
  .el-tabs__nav-wrap::after {
    border-radius: 8px;
    border: 1px solid #dfdfdf;
    height: 6px;
    background-color: #fff;
  }
  .el-tabs__active-bar{
    height: 6px;
    border-radius: 8px;
    background-color:#4A73FF
  }
  .el-tabs__item.is-active{
    color: #4A73FF;
  }
  .el-tabs__item{
    height: 56px;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    padding: 0;
  }
}
</style>